import { createElement, FormHTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { formDefaultProps } from './defaultProps';
import type { FormOptions } from './type';
import FormField from './FormField';
import FormGroup from './FormGroup';

export interface FormProps extends FormOptions, FormHTMLAttributes<HTMLFormElement> {}

interface FormInterface extends FC<FormProps> {
  Group: typeof FormGroup;
  Field: typeof FormField;
}

const Form: FormInterface = (props) => {
  const { className, equal, children, forwardedRef, ...formProps } = props;

  return createElement(
    'form',
    { ref: forwardedRef, className: classNames('ui', { equal, width: equal }, 'form', className), ...formProps },
    children,
  );
};

Form.displayName = 'Form';
Form.defaultProps = formDefaultProps;

Form.Field = FormField;
Form.Group = FormGroup;

export default Form;
